<template>
    <div class="loginbody">
        <img src="@/assets/images/testLogin/1.png" class="img1" />
        <img src="@/assets/images/testLogin/2.png" class="img2 flash2 animated infinite slower5" />

        <div class="img3 flash2 animated infinite">
            <img src="@/assets/images/testLogin/3.png" />
        </div>
    </div>
</template><script>
export default {
    name: 'userLogin',
    data() {
        return {}
    },

    mounted() {},

    methods: {}
}
</script><style scoped lang="scss">
@import '@/assets/css/animate.min.css';
@keyframes flash2 {
    0%,
    50%,
    to {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0.5;
    }
}
.flash2 {
    -webkit-animation-name: flash2;
    -moz-animation-name: flash2;
    -ms-animation-name: flash2;
    animation-name: flash2;
}
@keyframes imgRotate {
    0% {
        opacity: 0.9;
        transform: rotate(0);
    }

    100% {
        opacity: 1;
        transform: rotate(20deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loginbody {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url('../../assets/images/testLogin/5.png');
    background-size: 100% 100%;
    /* 拉伸至全屏 */
    background-repeat: no-repeat;

    /* 不重复 */
    .img1 {
        position: absolute;
        width: 975px;
        bottom: 105px;
        left: 79px;
        z-index: 2;
        -webkit-animation: imgRotate 10s linear infinite;
        animation: imgRotate 10s linear infinite;
    }

    .img2 {
        position: absolute;
        bottom: 66px;
        left: 178px;
        z-index: 1;
    }
    .rotate {
        transform-origin: center center;
        animation: rotate 2s linear infinite;
    }
    .img3 {
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        bottom: 0;

        img {
            height: 80%;
        }
    }
}
</style>